<html>
	<head>
		<style>
			#box{
			    width:500px;
			    height:300px;
			    border:1px solid black;
			    margin:10px auto;
			}
			#box1{
			    width:200px;
			    height:150px;
			    background:blue;
			    float:left;
			}
			#box2{
			    width:200px;
			    height:100px;
			    background:red;
			    float:left;
			}
			#box3{
			    width:200px;
			    height:100px;
			    background:green;
			    float:left;
			}
			p {
			     clear:both;
			}
		</style>
	</head>
	<body>
		<p>如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。</p>
		<div id="box">
		    <div id="box1">1
		    </div>
		    <div id="box2">2
		    </div>
		    <div id="box3">3
		    </div>
		    <p>浮动会影响处于其后的元素，需要清除浮动的影响。</p>
		</div>
	</body>
</html>